<template>
    <div>
      <loginHeader></loginHeader>
      <!-- <nav-header></nav-header> -->
      <nav-bread>
      	<span>商品</span>
      </nav-bread>
      <div class="accessory-result-page accessory-page">
        <div class="container">
          <div class="filter-nav">
            <span class="sortby">排序:</span>
            <a href="javascript:void(0)" class="default cur">默认排序</a>
            <a href="javascript:void(0)" class="price" @click="sortGoods">价格 <svg class="icon icon-arrow-short" v-bind:class="{'sort-up':!sortFlag}"><use xlink:href="#icon-arrow-short"></use></svg></a>
            <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
          </div>
          <div class="accessory-result">
            <!-- filter -->
            <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show': filterBy}">
              <dl class="filter-price">
                <dt>价格区间:</dt>
                <dd @click="priceChecked = 'all'"><a href="javascript:void(0)" v-bind:class="{'cur': priceChecked == 'all'}">All</a></dd>
                <dd v-for="(price, index) in priceFileter">
                  <a href="javascript:void(0)" @click="setPriceFilter(index)" v-bind:class="{'cur': priceChecked == index}">{{ price.startPrice }}-{{ price.endPrice }}</a>
                </dd>
              </dl>
            </div>

            <!-- search result accessories list -->
            <div class="accessory-list-wrap">
              <div class="accessory-list col-4">
                <ul>
                  <li v-for="(good, index) in goodslist">
                    <div class="pic">
                      <a href="#"><img v-lazy="'./../../static/' + good.productImage" alt=""></a>
                    </div>
                    <div class="main">
                      <div class="name">{{ good.productName }}</div>
                      <div class="price">{{ good.salePrice }}</div>
                      <div class="btn-area">
                        <a href="javascript:;" class="btn btn--m" @click="addCart(good.productId)">加入购物车</a>
                      </div>
                    </div>
                  </li>
                </ul>
                <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30" class="load-more" v-show="this.loading">
				  <img src="./../assets/loading-spinning-bubbles.svg">
				</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="md-overlay" v-show="overLayFlag" @click="closePop"></div>
      <nav-footer></nav-footer>
      <modal v-bind:mdShow="mdShow" v-on:close="closeModal">
      	<p slot="message">
      		请先登录，否则无法加入到购物车中
      	</p>
      	<div slot="btnGroup">
      		<a href="javascript:;" class="btn btn--m" v-on:click="mdShow = false">关闭</a>
      	</div>
      </modal>
      <modal v-bind:mdShow="mdShowCart" v-on:close="closeModal">
      	<p slot="message">
      		<svg class="icon-status-ok">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
            </svg>
            <span>加入购物车成功</span>
      	</p>
      	<div slot="btnGroup">
      		<a href="javascript:;" class="btn btn--m" v-on:click="mdShowCart = false">继续购物</a>
      		<router-link class="btn btn--m" href="javascript:;" to="/cart">查看购物车</router-link>
      	</div>
      </modal>
    </div>
</template>
<style type="text/css">
	.load-more{
		height: 100px;
		line-height: 100px;
		text-align: center;
	}
	.sort-up{
		transform: rotate(180deg);
		transition: all .3s ease-out;
	}
</style>
<script>
	import './../assets/css/base.css'
	import './../assets/css/product.css'
	import './../assets/css/login.css'
	import navHeader from '@/components/header'
	import navFooter from '@/components/footer'
	import navBread from '@/components/bread'
	import axios from 'axios'
	import loginHeader from '@/components/NavHeader'
	import Modal from '@/components/Modal'
    export default{
        data(){
            return {
            	goodslist: [],
            	priceFileter:[
            	{
            		startPrice: '0.00',
            		endPrice: '100.00'
            	},{
            		startPrice: '100.00',
            		endPrice: '500.00'
            	},{
            		startPrice: '500.00',
            		endPrice: '1000.00'
            	},{
            		startPrice: '1000.00',
            		endPrice: '2000.00'
            	}],
            	priceChecked: 'all',
            	filterBy: false,
            	overLayFlag: false,
            	sortFlag: true,// true代表升序
            	page: 1,
            	pageSize: 8,
            	busy: true,// 默认禁用，滚动就能生效
            	loading: false,
            	mdShow: false,
            	mdShowCart: false
            }
        },
        components: {
        	navHeader,
        	navFooter,
        	navBread,
        	loginHeader: loginHeader,
        	Modal
        },
        mounted() {
        	this.getGoodsList();
        },
        methods: {
        	getGoodsList(flag) {
        		var param = {
        			page: this.page,
        			pageSize: this.pageSize,
        			sort:this.sortFlag?1:-1,
        			priceLevel: this.priceChecked
        		}
        		this.loading = true;
        		// 一定要加params
        		axios.get('/goods/list',{
        			params: param
        		}).then((res) => {
        			if (res.data.status === "0") {
        				if (flag) {
        					this.loading = false;
        					this.goodslist = this.goodslist.concat(res.data.result.list);

        					if (res.data.result.count == 0) {
        						this.busy = true;// 没有更多数据了，就禁用滚动加载，不会请求loadmore了
        					} else {
        						this.busy = false;
        					}
        				} else {
        					this.goodslist = res.data.result.list;
        					this.busy = false;
        				}
        			} else {
        				this.goodslist = [];
        			}
        		})
        	},
        	showFilterPop() {
        		this.filterBy = true;
        		this.overLayFlag = true;
        	},
        	sortPrice(index) {
		    	this.priceChecked = index;
		    	this.page = 1;
		    	this.getGoodsList();
		    },
        	setPriceFilter(index) {
        		this.priceChecked = index;
        		this.page = 1;
        		this.closePop();
				this.getGoodsList();

        	},
        	closePop() {
        		this.overLayFlag = false;
        		this.filterBy = false;
        	},
        	sortGoods() {
        		this.sortFlag = !this.sortFlag;
        		this.page = 1;
        		this.getGoodsList();
        	},
        	loadMore: function() {
		        this.busy = true;// 让滚动加载失效
				// 当第一个请求完成之后才执行下个请求，减轻服务器压力
				setTimeout(() => {
					this.page ++;// 滚动之后页面加
					this.getGoodsList(true);
				}, 1000);
		    },
		    addCart: function(id) {
		    	axios.post('/goods/addCart', {
		    		productId: id
		    	}).then((res) => {
		    		if (res.data.status == 0) {
		    			this.mdShowCart = true;
              this.$store.commit('updateCartCount', 1);
		    		} else {
		    			this.mdShow = true;
		    		}
		    	});
		    },
		    closeModal() {
		    	this.mdShow = false;
		    }
        }
    }
</script>
